<template>
	<view class="main">
		<tou_hand1 handtitle='小区信息'></tou_hand1>
		<view class="show">
			<!-- <view class="vshand">
				数据统计始于：2020-04-01
			</view> -->
			<view class="sone1">
				<input v-model="name" placeholder='输入小区名搜索'/>
				<view class="sonefoot" @click="sbtn">
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//search.png"></image>
				</view>
			</view>
			<view class="tapthree">
				<van-collapse v-model="activeNames"  accordion>
					<van-cell v-for="(item, index) in blist" :key="index" @click="zxbtn(item.projectId)">
							<view class="taplist">
								<view>
									<view class="tphand">小区名称：{{item.projectName}}</view>
								</view>
							</view>
						<view class="showtap" v-if="show1 == item.projectId">
							<view class="showtap">
								<view class="stone">
									<view class="stoneleft">总人数<span @click='hgo(1)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：{{arr.totalUser}}个</view>
									<view class="stoneleft">总充值<span @click='hgo(2)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalMoney}}</view>	
									<view class="stoneleft">账户总消费<span @click='hgo(3)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalConsumption}}</view>
									<view class="stoneleft">临充总消费<span @click='hgo(4)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalTmpConsumption}}</view>
									<view class="stoneleft">基本账户消费<span @click='hgo(5)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalBalConsume}}</view>
									<view class="stoneleft">赠送账户消费<span @click='hgo(6)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalDummyConsume}}</view>
									<view class="stoneleft">总订单<span @click='hgo(7)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：{{arr.totalOrder}}单</view>
									<view class="stoneleft">跨区收入<span @click='hgo(8)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalInConsumption}}</view>
									<view class="stoneleft">跨区支出<span @click='hgo(9)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：¥{{arr.totalOutConsumption}}</view>
									<view class="stoneleft">总耗电量：{{arr.totalPower}}</view>
									<view class="stoneleft">资金池金额：¥{{arr.balance}}</view>
									<view class="stoneleft">资金池限制：¥{{arr.quota}}</view>
									<view class="stoneleft">消费退款资金池金额：¥{{arr.consumBalance}}</view>
									<view class="stoneleft">消费退款资金池限制：¥{{arr.consumQuota}}</view>
									<view class="stoneleft">当前充电人数：{{arr.chargingUser}}个</view>
									<view class="stoneleft">审核时间：{{arr.createTime}}</view>
									<view class="stoneleft">总退款<span @click='hgo(15)'><image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//help.png"/></image></span>：￥{{arr.totalRefund}}</view>
								</view>
							</view>
						</view>
					
					</van-cell>
				</van-collapse>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	import overlay from '../../components/overlay/overlay.vue'
	// import { Toast } from 'vant';
	export default {
		components: {tou_hand1,overlay},
		mounted() {
			
		},

		data() {
			return {
				active: '',
				activeNames: [''], //当前展开面板的 name
				blist:[],//本区消费数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 15, //每页显示的条数
				arr:{},//小区详情
				show1:false,//加载中
				cename:'a',
				name:''
			}
		},
		onLoad() {
			this.blist = [];
			this.onRefresh();
			// this.loadMore();
		},
		methods: {
			// 小区列表分页
			loadMore() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					projectName:this.name
				}
				that.loading = true;
				that.$base.request1('manager/statistic/project/list', 'GET', data)
					.then(res => {
						uni.hideLoading()
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.blist = that.blist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			zxbtn(vul){
					if(this.show1 != vul){
						this.show1=vul
						this.$base.request1('manager/statistic/project'+'/'+vul, 'GET')
							.then(res => {
								
								if(res.data.code==200){
									this.cename=vul
									this.arr=res.data.data
								}else{
									this.show1=false
									this.$toast.fail(res.data.msg)
								}
							})
							.catch(err => {
								
							})
					}
					else{
							this.show1=false
					}
				
			},
			hgo(vul){
				var toast=Toast({
					duration:0,
					message:'',
					closeOnClick:true,
					closeOnClickOverlay:true,
					overlay:true
				})
				if(vul==1){
					toast.message='小区总用户数，包括微信用户和注册用户'
				}else if(vul==2){
					toast.message='账户余额总充值，不含临充金额'
				}else if(vul==3){
					toast.message='包括：基本账户消费金额、赠送账户消费金额，不包含购买包月金额'
				}else if(vul==4){
					toast.message='表示临充消费总金额，非临时充电充值金额'
				}else if(vul==5){
					toast.message='临充消费金额、基本账户消费金额（含跨区收入）'
				}else if(vul==6){
					toast.message='赠送账户消费金额（含跨区收入）'
				}else if(vul==7){
					toast.message='本小区充电订单总数'
				}else if(vul==9){
					toast.message='本小区用户在其他小区消费，包括：跨区消费的基本账户消费金额和赠送账户消费金额'
				}else if(vul==8){
					toast.message='其他小区用户在本小区消费，包括：跨区消费的基本账户消费金额和赠送账户消费金额'
				}else if(vul==15){
					toast.message='账户充值总退款，与临充退款无关'
				}
			},
			//搜索
			sbtn(){
				this.blist = [];
				this.onRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		background-color: #F5F5F5;
		
		/deep/.van-list__finished-text{
			margin-top: 100upx !important;
			padding-bottom: 200upx !important;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0 !important;
		}
		.show{
			padding-bottom: 200upx;
			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}
			
			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}
			
			/deep/.van-tabs__line {
				width: 210upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}
			.sone1{
				width: 650upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin: 32upx auto;
				input{
					width: 562upx;
					height: 64upx;
					border: 1upx solid #b0b0b0;
					padding-left: 20upx;
				}
				.sonefoot{
					width: 101upx;
					height: 68.5upx;
					background-color: #4B98ED;
					text-align: center;
					box-sizing: border-box;
					padding-top: 13upx;
					image{
						width: 39upx;
						height: 40upx;
					}
				}
			}
			.tapthree {
				// margin: 160upx 0;
				// margin-bottom: 150upx;
				.taplist{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.tphand {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 500upx;
					}
								
					.tpfoot {
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						margin-top: 10upx;
					}
					.tapmoney{
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #4b98ed;
					}
				}
				
			
				/deep/.van-collapse {
					background-color: #F5F5F5;
				}
			
				/deep/.van-collapse-item {
					// margin-top: 22upx;
				}
			
				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}
			
				/deep/.van-cell {
					align-items: center;
					padding: 15upx 20upx;
				}
			
				.showtap {
					width: 100%;
					box-sizing: border-box;
					padding: 21upx 0;
					.stone{
						box-sizing: border-box;
						width: 100%;
						.stoneleft{
							display: flex;
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							margin-bottom: 15upx;
							span{
								display: flex;
								align-items: center;
								image{
									width: 24upx;
									height: 24upx;
									margin: 0 7upx;
								}
							}
						}
					}
				}
			
			}
			.vshand{
				width: 100%;
				background-color: #f7f7f7;
				font-size: 24upx;
				font-family: PingFang SC Regular, PingFang SC Regular-Regular;
				font-weight: 400;
				text-align: center;
				color: #999999;
				box-sizing: border-box;
				padding:10upx 0;
			}
		}
		
	}
</style>
